<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form{
            position:absolute;
            top:20px;
            left:50%;
            transform:translate(-50%,0%);
            background-color: #909399;
            border-radius: 50px;
            border: lightskyblue solid 2px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <template>
            <el-table
                    :data="collegeList"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="学院id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="学院名称"
                        width="180">
                </el-table-column>
                </el-table-column>
            </el-table>
        </template>
    </div>
</body>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                collegeList:[]
            }
        },
        methods: {
            closeFrom(){
                this.fromShow=false;
                this.collegeModel={};
            },
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },

            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },

            errorMsg(msg) {
                this.$message.error(msg);
            },
            getAll(){
                 
                axios.get(this.http_prefix+"college").then(
                     resp=>{
                        if(resp.data.code!=1)
                        {
                            return;
                        }
                        this.collegeList=resp.data.data
                        console.log(this.collegeList)
                    }
                ).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            init(){
                this.getAll()
            },
            updateOrAddCollege(){
                if(this.collegeModel.id!=null)
                {
                    this.updatecollege(this.collegeModel)
                }else{
                    this.addcollege(this.collegeModel)
                }
                this.closeFrom()
            },
            editcollege(row){
                this.fromShow=true
                this.collegeModel={...row}

            },
            deletecollege(row){
                this.deleteById(row.id)
            }
        },
        mounted() {
            this.init()
        }

    })
</script>
</html>